<template>
  <div class="not-funtd animate__animated">
    <div class="bg-c">
      <h1>{{title}}</h1>
      <el-button @click="returnIndexPage" type="text">点我返回主页</el-button>
    </div>
  </div>
</template>
<style lang="scss">
.not-funtd {
  background-image: var(--layout-bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  .bg-c {
    height: 100vh;
    background-color: var(--layout-color-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    >h1 {
      color: white;
      margin-bottom: 12px;
    }
  }
}
</style>
<script lang="ts" setup>
import { ref } from 'vue'
import { routeTitle, routeTitleType, indexRouteName } from '@/assets/js/text'
import { useRoute, useRouter } from 'vue-router'
const $route = useRoute()
const $router = useRouter()
// 根据当前路由名称加载网页标题
document.title = `${routeTitle[$route.name as string] as routeTitleType}`
// 使用网页标标题当做404提示语
const title = document.title
// const name:Ref<string> = ref('张三')
// 返回主页的方法
const returnIndexPage = () => {
  $router.push({
    name: indexRouteName
  })
}
</script>
